<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    ul li{list-style: none;}
    .nav{display: flex;}
</style>
</head>
<body>
    <div id='app'>
        <!-- 头部-header -->
        <header>
            <nav>
                <ul class="nav">
                    <li v-for='(item) in navList'>
                        {{ item }}
                    </li>
                </ul>
            </nav>
        </header>
        <!-- 中间区 -->
        <main>
            <!-- 轮播 -->
            <img v-bind:src="mainPack.banner" alt="">
            <!-- 内容 -->
        </main>
        <!-- 底部 -->
        <footer>

        </footer>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                navList:['首页','新闻','产品'],
                mainPack:{
                    banner:'./img/banner.jpg',
                    demo1:{name:'模块一'}
                },
                footer:{
                    phone:'400-1992145'
                }
            }
        })
    </script>



</body>
</html>